<template>
	<h-chart-container :options="options"></h-chart-container>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import type { EChartsOption, EChartsCoreOption } from 'echarts';

import HChartContainer from './HChartContainer.vue';

export default defineComponent({
	name: 'HSunburstChart',

	components: {
		HChartContainer,
	},

	setup() {
		const options = ref<EChartsOption>({
			series: {
				type: 'sunburst',
				data: [
					{
						name: 'Grandpa',
						children: [
							{
								name: 'Uncle Leo',
								value: 15,
								children: [
									{
										name: 'Cousin Jack',
										value: 2,
									},
									{
										name: 'Cousin Mary',
										value: 5,
										children: [
											{
												name: 'Jackson',
												value: 2,
											},
										],
									},
									{
										name: 'Cousin Ben',
										value: 4,
									},
								],
							},
							{
								name: 'Father',
								value: 10,
								children: [
									{
										name: 'Me',
										value: 5,
									},
									{
										name: 'Brother Peter',
										value: 1,
									},
								],
							},
						],
					},
					{
						name: 'Nancy',
						children: [
							{
								name: 'Uncle Nike',
								children: [
									{
										name: 'Cousin Betty',
										value: 1,
									},
									{
										name: 'Cousin Jenny',
										value: 2,
									},
								],
							},
						],
					},
				],
				radius: [0, '90%'],
				label: {
					rotate: 'radial',
				},
			},
		}) as Ref<EChartsOption>;

		return {
			options,
		};
	},
});
</script>
